<template>
   <!-- 筛选区 -->
  <div class="sub-filter" v-if="filterData">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a  href="JavaScript:;" v-for="brand in filterData.brands"
        :key="brand.id"
        :class="{active: brand.isClass === true}"
        @click="changeBrand(brand.id)">
           {{brand.name}}
        </a>
      </div>
    </div>
    <div class="item" v-for="p in filterData.saleProperties" :key="p.id">
      <div class="head">{{p.name}}：</div>
      <div class="body">
        <a href="JavaScript:;" :class="{active: attr.isClass === true}"  v-for="attr in p.properties" :key="attr.id" @click="changeAttrs(attr,p)">{{attr.name}}</a>
      </div>
    </div>
  </div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { ref, watch, inject } from 'vue'
export default {
  name: 'SubFilter',
  setup () {
    const filterData = ref(null)
    const route = useRoute()
    async function loadData () {
      const res = await findSubCategoryFilter(route.params.id)
      // 在品牌和规格list的头部添加一个全部类别
      const result = res.result
      // 品牌
      result.brands.unshift({
        id: null,
        name: '全部',
        isClass: true // 控制字体颜色
      })
      // 类别加全部
      result.saleProperties.forEach(item => {
        item.properties.unshift({
          id: null,
          name: '全部',
          isClass: true
        })
      })
      //   console.log('获取筛选数据', res)
      filterData.value = result
    }
    watch(
      () => {
        return route.params.id
      },
      () => {
        route.params.id && route.path === `/category/sub/${route.params.id}` && loadData()
      },
      { immediate: true }
    )
    // 接收父组件传入的方法集合
    const setData = inject('setData')
    // 品牌字段同步
    function changeBrand (id) {
      setData.setBrandId(id)
      // console.log('我是品牌字段的数据', filterData)
      const index = filterData.value.brands.findIndex(item => item.id === id)
      // console.log('我是当前点击品牌字段在数组中的索引', index)
      // 其余的改为fasle
      filterData.value.brands.map(item => { item.isClass = false })
      // console.log('我是修改为false后的数据', filterData)
      // 当前点击的字段改为true
      filterData.value.brands[index].isClass = true
      // console.log('我是更改为true后的的数据', filterData)
    }
    // 规格字段同步
    function changeAttrs (attr, p) {
      setData.setAttrs({
        propertyName: attr.name,
        groupName: p.name,
        groupId: p.id,
        isClass: false
      })
      // console.log('我是规格字段的数据', filterData.value)
      // console.log(attr)
      // console.log(p)
      // // 先查找到当前点击的对象
      // const index = filterData.value.saleProperties.findIndex(item => item.id === p.id)
      // console.log('当前点击对象的索引', index)
      // // 通过当前点击的对象id匹配attr的id
      // const idx = filterData.value.saleProperties[index].properties.findIndex(item => item.id === attr.id)
      // console.log('当前匹配到的索引', idx)
      // // 其余改为false 没有的添加一个
      // filterData.value.saleProperties[index].properties.map(item => { item.isClass = false })
      // 当前点击的字段改为true
      // attr.saleProperties[index].properties[idx].isClass = true
      // 或
      // 根据p.id(父级id)找到当前点击的properties数组 遍历每一项添加isclass属性 值为false
      filterData.value.saleProperties.filter(item => item.id === p.id)[0].properties.map(item => { item.isClass = false })
      attr.isClass = true
    }
    return {
      filterData,
      changeBrand,
      changeAttrs
    }
  }
}
</script>
<style scoped lang='less'>
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      padding: 10px 0;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
</style>
